.aaa {
    background: pink;
}

.bbb {
    background: rgb(199, 154, 5);
}

.ccc {
    background: rgb(73, 135, 228);
}

.wapperDiv {
    height: 200px;
    width: 200px;
    background: rgb(199, 231, 158);
    overflow-y: auto;
}

.wapperDiv div {
    height: 400px;
    width: 100px;
    background: rgb(216, 158, 231);
    border-right:3px  dashed;
}
.wapperDiv div p{
    padding:5px;
    margin:0;
    font-size: 14px
}

.scrollData {
    font-size: 16px;
}

/* 截图 */

#box {
    width: 100%;
    height: 250px;
    position: relative;
}

#img1,
#img2 {
    width: 100%;
    height: 100%;
    position: absolute;
}

#img1 {
    opacity: 0.4;
}

#img2 {
    clip: rect(0, 100px, 100px, 0)
    /*
    rect(top right bottom left)
    表示的含义就是：
    top:最终剪裁的矩形的上边距离原始元素的上边缘30像素；
    right:剪裁矩形的右边缘距离原元素左边缘的距离是200像素；
    bottom:剪裁矩形的下边缘距离原元素顶部的距离为200像素；
    left:剪裁矩形的左边缘距离原元素左边缘的距离时20像素。
    */
}

#main {
    position: absolute;
    z-index: 100;
    border: 1px solid red;
    width: 100px;
    height: 100px;
    box-sizing: border-box;
}

#main div {
    width: 20px;
    height: 20px;
    background: black;
    position: absolute;
}

#dian1 {
    left: calc(0% - 10px);
    top: calc(0% - 10px);
    cursor: nw-resize;
}

#dian2 {
    left: calc(50% - 10px);
    top: calc(0% - 10px);
    cursor: n-resize;
}

#dian3 {
    right: calc(0% - 10px);
    top: calc(0% - 10px);
    cursor: ne-resize;
}

#dian4 {
    left: calc(0% - 10px);
    top: calc(50% - 10px);
    cursor: w-resize;
}

#dian5 {
    right: calc(0% - 10px);
    top: calc(50% - 10px);
    cursor: e-resize;
}

#dian6 {
    left: calc(0% - 10px);
    bottom: calc(0% - 10px);
    cursor: sw-resize;
}

#dian7 {
    left: calc(50% - 10px);
    bottom: calc(0% - 10px);
    cursor: s-resize;
}

#dian8 {
    right: calc(0% - 10px);
    bottom: calc(0% - 10px);
    cursor: se-resize;
}